import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Material 2.12
import QtQuick.Layouts 1.12

Page {
	property alias userAvatar: avatar_image
	Rectangle {
		id: background_rect
		z: -99
		anchors.fill: parent
		color: "#F0F0F0"
	}
	Rectangle {
		id: profile_panel_rect
		z: -80
		anchors.fill: parent
		Layout.margins: 5
		color: "#ffffff"
		radius: 20
		ColumnLayout {
			anchors.fill: parent
			Rectangle {
				id: avatar_rect
				Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
				Layout.minimumHeight: background_rect.width / 6
				Layout.minimumWidth: background_rect.width / 6
				Layout.preferredHeight: background_rect.width / 5
				Layout.preferredWidth: background_rect.width / 5
				Layout.topMargin: 30
				Layout.leftMargin: 30
				Layout.rightMargin: 30

				border.color: Material.color(Material.LightGreen,
											 Material.Shade500)
				border.width: 2
				radius: width

				color: "#00ffffff"
				RoundButton {
					id: avatar_image
					anchors.fill: parent
					flat: true
					icon.source: "./Images/drawable-xxhdpi/round_person_black_48.png"
					icon.color: Material.color(Material.LightGreen,
											   Material.Shade500)
					icon.width: parent.width / 2
					icon.height: parent.height / 2
				}
			}
			Label {
				id: username_label
				Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
				Layout.topMargin: 30
				Layout.leftMargin: 30
				Layout.rightMargin: 30
				text: "{{user_name}}"
			}
			Rectangle {
				id: menu_panel_rect
				Layout.fillWidth: true
				Layout.fillHeight: true
				Layout.topMargin: 30
				Layout.leftMargin: 30
				Layout.rightMargin: 30
				color: Material.color(Material.Cyan, Material.Shade300)
				border.width: 3
				border.color: Material.color(Material.Teal, Material.Shade300)
				radius: 20
				ColumnLayout {
					anchors.fill: parent
					Button {
						id: account_detail
						Layout.fillWidth: true
						flat: true
						highlighted: true
					}
				}
			}
			Button {
				id: login_button
				Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
				Layout.margins: 30
				highlighted: true
				Material.accent: Material.Red
				text: " 退 出 登 录 "
				font.family: defaultFontFamily
				font.pointSize: 20
			}
		}
	}
}

/*##^##
Designer {
	D{i:0;autoSize:true;height:480;width:640}
}
##^##*/

